<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
  <button @click="a++">a++</button>
  <h2>a:{{a}}</h2>
  <button @click="bye">bye</button>
</div>

<script type="text/javascript">
  /*
  * vm的一生(vm的生命周期):
  *     将要创建 ===> 调用beforeCreate
  *     创建完成 ===> 调用created
  *     将要挂载 ===> 调用beforeMount
  *    *挂载完成 ===> 调用mounted       ==========>[重要钩子]
  *     将要更新 ===> 调用beforeUpdate
  *     更新完毕 ===> 调用updated
  *     将要销毁 ===> 调用beforeDestroy
  *    *销毁完毕 ===> 调用destroyed      ==========>[重要钩子]
  *
  *
  *
  *
  * */
  var vm = new Vue({
    el: '#root',
    data: {
      a: 1
    },
    methods: {
      bye() {
        console.log('bye');
        this.$destroy();
      }
    },
    beforeCreate() {
      console.log('beforeCreate')
    },
    created() {
      console.log('created')
    },
    beforeMount() {
      console.log('beforeMount')
    },
    mounted() {
      console.log('mounted')
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    updated() {
      console.log('updated')
    },
    beforeDestroy() {
      console.log('beforeDestroy')
    },
    destroyed() {
      console.log('destroyed')
    }

  });
</script>
</body>
</html>
